<!--
 * @Author: Bennty
 * @Date: 2024-07-15 08:44:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-20 10:04:49
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" width='30%' title="申请样品" @close="handleClose" destory-on-close>
        <el-form :model="formData" ref="form">
            <el-form-item label="客户名称">
                {{ props.data?.customerName }}
            </el-form-item>
            <el-form-item label="级别">
                <span class="level-one" v-if="props.data.customerLevel == 1">一级客户</span>
                <span class="level-two" v-else-if="props.data.customerLevel == 2">二级客户</span>
                <span class="level-three" v-else-if="props.data.customerLevel == 3">三级客户</span>
                <span class="level-four" v-else-if="props.data.customerLevel == 4">四级客户</span>
                <span class="level-five" v-else-if="props.data.customerLevel == 5">五级客户</span>
            </el-form-item>
            <el-form-item label="成交状态">
                <span :class="props?.data?.status?'completed':'uncompleted'">{{ props?.data?.status?'已成交':'未成交' }}</span>
            </el-form-item>
            <el-form-item label="申请来源" prop="applySource">
                <el-select v-model="formData.applySource" placeholder="请选择">
                    <el-option v-for="item in props.sources" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联订单编号" prop="orderNumber">
                <el-input v-model.number="formData.orderNumber" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="申请样品名称" prop="welfareName">
                <el-input v-model="formData.welfareName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="申请样品数量" prop="applyNum">
                <el-input v-model.number="formData.applyNum" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { addWelfareApply } from '@/api/sj/welfareExamine-crm/index';

const form = ref<FormInstance>();
const props = defineProps(['visible','data','sources']);
const emit = defineEmits(['submit','close']);

const formData = ref({
    applySource: undefined,
    orderNumber: undefined,
    welfareName: undefined,
    applyNum: undefined,
    type: 1
});

const handleSubmit = async () => {
    const submitData = {
        customerId: props.data.id,
        customerName: props.data.customerName,
        level: props.data.customerLevel,
        ...formData.value
    }
    const { code } = await addWelfareApply(submitData);
    if(code == 200){
        emit('submit',true);
        handleClose();
    }else{
        emit('submit',false);
    }
};

const handleClose = ()=>{
    form.value?.resetFields();
    emit('close');
};

</script>

<style scoped lang="scss">
.completed{
    color: yellowgreen
}
.uncompleted{
    color: orange
}
.level-one,.level-two {
    color:yellowgreen
}
.level-three,.level-four{
    color: orange;
}
.level-five{
    color: red
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>